<template>
  <div class="staffManage">
    <div class="searchBox">
      <div class="left">
        <label for="">员工名称：</label>
        <common-input
          v-model:queryCriteria.trim="staffName"
          :placeholder="'请输入员工名称'"
        ></common-input>
        <!-- <label for="">手机号码：</label> -->
        <!-- <common-input
            v-model:phoneNumber.trim.number="phoneNumber"
            :placeholder="'请输入手机号码'"
        ></common-input> -->
      </div>

      <div class="right">
        <el-button type="primary" @click="handleQuery" @keydown.enter="handlePlus">
          <el-icon :size="16">
            <Search />
          </el-icon>
          搜索
        </el-button>
        <el-button type="primary" @click="resetQuery">
          <el-icon :size="16">
            <Refresh />
          </el-icon>
          重置
        </el-button>
        <el-button type="primary" @click="handlePlus">
          <el-icon :size="16">
            <Plus />
          </el-icon>
          生成邀约连接
        </el-button>
        <el-button type="primary" @click="staffDetailShow = true">
          <el-icon :size="16">
            <Search />
          </el-icon>
          查看入职填写情况
        </el-button>
      </div>
    </div>
    <common-table
      :style="{ flex: 1 }"
      :columns="columns"
      :table-data="tableData"
      :pagination="pagination"
    >
      <template #employeeName="{ row }">
        <span @click="showStaffDetail(row)" class="employeeName">{{ row.employeeName }}</span>
      </template>
      <template #hireDate="{ row }">
        <span>{{ row.hireDate }}</span>
      </template>
      <template #employeeStatus="{ row }">
        <el-tag
          :type="
            row.employeeStatus == '已离职'
              ? 'danger'
              : row.employeeStatus == '正式员工'
              ? 'success'
              : 'warning'
          "
        >
          {{ row.employeeStatusStr }}
        </el-tag>
      </template>
      <template #operate="{ row }">
        <el-link type="primary">
          <el-icon :size="20">
            <Edit />
          </el-icon>
          <span @click="updateStaff(row)">修改</span>
        </el-link>
        <el-link type="primary">
          <el-icon :size="20">
            <Delete />
          </el-icon>
          <span @click="deleteStaff(row)">删除</span>
        </el-link>
      </template>
    </common-table>
    <add-staff v-if="addStaffDialog" v-model:addStaffDialog="addStaffDialog"></add-staff>
    <link-dialog v-model:linkDialog="linkDialog" :link="linkMsg"></link-dialog>
    <view-staff-detail
      @updatePageList="getPageList"
      v-if="staffDetailShow"
      v-model:staffDetailShow="staffDetailShow"
    ></view-staff-detail>
    <view-detail
      @joinOffer="handleJoin"
      v-if="detailShow"
      :show-btns="false"
      v-model:detailShow="detailShow"
      :cur-row="curRow"
    ></view-detail>
    <update-staff-dialog
      v-if="updateShow"
      v-model:updateShow="updateShow"
      :cur-row="curRow"
      @updated="handleUpdated"
    ></update-staff-dialog>
  </div>
</template>
<script setup>
import CommonTable from '@/components/CommonTable.vue';
import CommonInput from '@/components/CommonInput.vue';
import CommonSelect from '@/components/CommonSelect.vue';
import { ref } from 'vue';

import { columns } from '@/views/staffManage/mockData';
import { getStaffManagePageList, deleteStaffReq, joinOffer } from '@/api/staffManage';
import { ElMessage, ElMessageBox } from 'element-plus';
import AddStaff from '@/views/staffManage/components/addStaff.vue';
import LinkDialog from '@/views/staffManage/components/LinkDialog.vue';
import ViewStaffDetail from '@/views/staffManage/components/ViewStaffDetail.vue';
import ViewDetail from '@/views/staffManage/components/ViewDetail.vue';
import UpdateStaffDialog from '@/views/staffManage/components/UpdateStaffDialog.vue';

const curRow = ref({});
// 查看入职填写情况
const staffDetailShow = ref(false);

const addStaffDialog = ref(false); //新增员工弹窗

const staffName = ref(''); //员工姓名
const phoneNumber = ref(''); //手机号码
// 分页
const pagination = ref({
  pageNum: 1,
  pageSize: 10,
  total: 0,
});

const tableData = ref([]);

const linkDialog = ref(false);
const linkMsg = ref('');

const handlePlus = async () => {
  const res = await joinOffer();
  if (res && res.code == 200) {
    linkDialog.value = true;
    linkMsg.value = res.data.formLink;
    // window.open(res.data.formLink, '_blink')
  }
};
const deleteStaff = async (row) => {
  ElMessageBox.confirm('确认删除该部门吗?', '删除', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(async () => {
      ElMessage({
        type: 'success',
        message: '删除成功！',
      });
      const res = await deleteStaffReq({ id: row.employeeId });
      getPageList();
    })
    .catch(() => {});
};

const getPageList = async () => {
  let val = '';
  let sl = staffName.value.length;
  let pl = phoneNumber.value.length;
  if (sl == 0 && pl == 0) {
    val = '';
  } else if (sl !== 0 && pl == 0) {
    val = staffName.value;
  } else if (sl == 0 && pl !== 0) {
    val = phoneNumber.value;
  } else {
    val = staffName.value + ',' + phoneNumber.value;
  }
  let par = {
    currentPage: pagination.value.pageNum,
    pageSize: pagination.value.pageSize,
    queryCriteria: val,
  };
  const res = await getStaffManagePageList(par);
  if (res && res.code == 200) {
    tableData.value = res.data.allEmployeeList;
    pagination.value.total = res.data.page.totalEntries * 1;
  }
};

const detailShow = ref(false);
const showStaffDetail = (row) => {
  curRow.value = row;
  detailShow.value = true;
};

const updateShow = ref(false);
const updateStaff = (row) => {
  console.log(row);
  curRow.value = row;
  updateShow.value = true;
};

const handleJoin = (row) => {
  console.log(row);
};

const handleUpdated = () => {
  getPageList();
};

// 获取员工分页列表
// TODO暂无接口
getPageList();

const handleQuery = () => {
  pagination.value.pageNum = 1;
  getPageList();
};

const resetQuery = () => {
  staffName.value = '';
  phoneNumber.value = '';
  pagination.value.pageNum = 1;
  getPageList();
};

const setSize = (val) => {
  pagination.value.pageNum = 1;
  pagination.value.pageSize = val;
  getPageList();
};
const setPage = (val) => {
  pagination.value.pageNum = val;
  getPageList();
};

defineExpose({
  setSize,
  setPage,
});
</script>

<style scoped lang="less">
.staffManage {
  background-color: #ffffff;
  flex: 1;
  max-height: 100%;
  display: flex;
  flex-direction: column;

  .employeeName {
    color: #3070f9;
    cursor: pointer;
  }

  .searchBox {
    display: flex;
    align-items: center;
    padding: 0 24px;
    height: 32px;
    margin: 16px 0;

    .left {
      display: flex;
      align-items: center;
      margin-right: 16px;
    }

    label {
      font-size: 14px;
      color: #999999;
      margin-right: 3px;
    }
  }

  /deep/ .el-link {
    margin-right: 8px;
  }
}
</style>
